<template>
  <div>
    <v-container class="mt-12" style="max-width: 1500px">
      <div
        class="
          d-flex
          flex-column
          align-center
          text-center
          justify-center
          text-body-1
        "
      >
        <div>
          <img src="@/static/img/icon/horn2.png" style="width: 39px" />
          <h2 class="mt-3">推广</h2>
        </div>
      </div>

      <!-- <v-row class="promote-activity mt-16" justify="center">
        <v-col class="box-type" cols="4" md="2">
          <div class="box-item">
            <img class="box-img" src="@/static/img/box/box_5.png"/>
            <img class="box-bg" src="@/static/img/box/hong.png"/>
            <p>狂牙箱子</p>
          </div>
        </v-col>

        <v-col class="box-type" cols="4" md="2">
          <div class="box-item">
            <img class="box-img" src="@/static/img/box/box_2.png"/>
            <img class="box-bg" src="@/static/img/box/cheng.png"/>
            <p>木头箱子</p>
          </div>
        </v-col>

        <v-col class="box-type" cols="4" md="2">
          <div class="box-item">
            <img class="box-img" src="@/static/img/box/box_7.png"/>
            <img class="box-bg" src="@/static/img/box/lv.png"/>
            <p>翡翠箱子</p>
          </div>
        </v-col>

        <v-col class="box-type" cols="4" md="2">
          <div class="box-item">
            <img class="box-img" src="@/static/img/box/box_4.png"/>
            <img class="box-bg" src="@/static/img/box/bai.png"/>
            <p>铂金箱子</p>
          </div>
        </v-col>

        <v-col class="box-type" cols="4" md="2">
          <div class="box-item">
            <img class="box-img" src="@/static/img/box/box_1.png"/>
            <img class="box-bg" src="@/static/img/box/lan.png"/>
            <p>青铜箱子</p>
          </div>
        </v-col>
      </v-row> -->

      <!-- <div class="promote-activity">
        <div class="all-keys">
      <span>
        你累积通过活动获得了
        <i>0</i>把钥匙
      </span>
        </div>
        <div class="all-keys group-keys">
      <span>
        木头钥匙
        <i>0</i>把
      </span>
          <span>
        青铜钥匙
        <i>0</i>把
      </span>
          <span>
        铂金钥匙
        <i>0</i>把
      </span>
          <span>
        翡翠钥匙
        <i>0</i>把
      </span>
          <span>
        狂牙钥匙
        <i>0</i>把
      </span>
        </div>
      </div> -->

      <!-- <div class="get-keys">
        <div class="wrapper py-md-16 pl-md-16 py-12 pl-14">
          <div class="keys py-md-16 pl-md-16 py-12 pl-14 text-body-1">
            <div class="item d-flex align-center">
              <div class="d-flex align-center">
                邀请用户注册并充值
                <span style="color: #ff9d00;">100</span>
                <img src="@/static/img/icon/coin.png"/>
              </div>

              <div class="d-flex align-center">
                <img alt="木头钥匙" src="@/static/img/key/key_1.png" style="width: 48px;height: 48px"/>
                <h4>+1木头钥匙</h4>
              </div>
            </div>

            <div class="item d-flex align-center">
              <div class="d-flex align-center">
                邀请用户注册并充值
                <span style="color: #ff9d00;">500</span>
                <img src="@/static/img/icon/coin.png"/>
              </div>

              <div class="d-flex align-center">
                <img alt="青铜钥匙" src="@/static/img/key/key_2.png" style="width: 48px;height: 48px"/>
                <h4>+1青铜钥匙</h4>
              </div>
            </div>

            <div class="item d-flex align-center">
              <div class="d-flex align-center">
                邀请用户注册并充值
                <span style="color: #ff9d00;">2000</span>
                <img src="@/static/img/icon/coin.png"/>
              </div>

              <div class="d-flex align-center">
                <img alt="铂金钥匙" src="@/static/img/key/key_3.png" style="width: 48px;height: 48px"/>
                <h4>+1铂金钥匙</h4>
              </div>
            </div>

            <div class="item d-flex align-center">
              <div class="d-flex align-center">
                邀请用户注册并充值
                <span style="color: #ff9d00;">10000</span>
                <img src="@/static/img/icon/coin.png"/>
              </div>

              <div class="d-flex align-center">
                <img alt="翡翠钥匙" src="@/static/img/key/key_4.png" style="width: 48px;height: 48px"/>
                <h4>+1翡翠钥匙</h4>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </v-container>
    <v-container style="max-width: 1500px">
      <div style="background-color: #1a1a1e">
        <v-row
          class="text-start pa-10 text-h6 text-sm-h4 text-md-h6 text-lg-body-1"
          justify="center"
        >
                    <v-col class="py-12" cols="12" md="6" v-for="(item,index) in contentList" :key="index">
                      <div v-html="item.value" class="ql-editor"></div>
                    </v-col>
<!--          <v-col class="py-12" cols="12" md="6">-->
<!--            <h3>为什么选择ofskins？</h3>-->
<!--            <p class="mt-3">-->
<!--              公平概率，全新玩法，拒绝其他不公平网站。高效的框架搭建，真实的算法检测。ofskins开箱网，你的不二之选。-->
<!--            </p>-->
<!--          </v-col>-->
<!--          <v-col class="py-12" cols="12" md="6">-->
<!--            <h3>我是主播/up主，我该怎么推广ofskins？</h3>-->
<!--            <p class="mt-3">-->
<!--              将你的推广链接发送给你想要推广的人，每位有效的被推广用户都会让您获得相应比例的推广福利哦！-->
<!--            </p>-->
<!--          </v-col>-->

<!--          <v-col class="py-12" cols="12" md="6">-->
<!--            <h3>如果你想更多了解网站：</h3>-->
<!--            <p class="mt-3">-->
<!--              欢迎加入QQ群聊：724426197。最先入群的小伙伴可以获得群内不定期福利哦。名额有限，先到先得。-->
<!--            </p>-->
<!--          </v-col>-->

          <v-col class="py-12" cols="12" md="6">
            <h3></h3>
            <p class="mt-3"></p>
          </v-col>
        </v-row>
      </div>
    </v-container>
    <div class="text-center text-h4 my-16">邀请好友</div>
    <div class="prompte-box">
      <v-container style="max-width: 1500px">
        <div>
          <v-row class="justify-space-around">
            <v-col cols="12" md="6">
              <div class="d-flex justify-center">
                <div style="width: 80%">
                  <p>你的推广链接</p>
                  <div class="d-flex mt-2">
                    <el-input
                      :model-value="`${BASE_URL}/?code=${inviteCode}`"
                      size="medium"
                    ></el-input>
                    <v-btn
                      v-clipboard="`${BASE_URL}/?code=${inviteCode}`"
                      class="bg-deep-purple text-white ml-2"
                    >
                      复制推广链接
                    </v-btn>
                  </div>
                </div>
              </div>
            </v-col>

            <v-col cols="12" md="6">
              <div class="text-md-start d-flex justify-center">
                <div style="width: 80%">
                  <p>你的推广码</p>
                  <div class="mt-2">
                    <div class="d-flex">
                      <el-input
                        :model-value="inviteCode"
                        size="medium"
                      ></el-input>
                      <v-btn
                        v-clipboard="inviteCode"
                        class="bg-deep-purple text-white ml-2"
                        >复制推广码</v-btn
                      >
                    </div>
                  </div>
                </div>
              </div>
            </v-col>
          </v-row>
        </div>

        <div class="main my-5">
          <div>
            <div class="ma-md-16 pt-md-5 text-h6 text-center">
              <v-row>
                <v-col cols="6" md="2">
                  <div>你的等级</div>
                  <div class="bg-grey-darken-5 py-5 mt-4">{{ stat.level }}</div>
                </v-col>

                <v-col cols="6" md="2">
                  <div>邀请朋友数量</div>
                  <div class="bg-grey-darken-5 py-5 mt-4">{{ stat.num }}</div>
                </v-col>

                <v-col cols="6" md="2">
                  <div>邀请充值金额</div>
                  <div class="bg-grey-darken-5 py-5 mt-4">
                    {{ stat.recharge }}
                  </div>
                </v-col>

                <v-col cols="6" md="2">
                  <div>奖励比例</div>
                  <div class="bg-grey-darken-5 py-5 mt-4">
                    {{ stat.rebate_rate }}%
                  </div>
                </v-col>

                <v-col cols="6" md="2">
                  <div>奖励总额</div>
                  <div class="bg-grey-darken-5 py-5 mt-4">
                    {{ stat.rebate_total }}
                  </div>
                </v-col>

                <v-col cols="6" md="2">
                  <div>当前奖励</div>
                  <div class="bg-grey-darken-5 py-5 mt-4">
                    {{ stat.rebate_current }}
                  </div>
                </v-col>
              </v-row>
            </div>
          </div>
        </div>

        <div class="get-rebates">
          <div class="btn" @click="receiveRebate">获取奖励</div>
        </div>
        <div class="prompte-desc">
          <div class="content ma-md-16 ma-sm-10 ma-6 text-h6">
            <div v-html="promotion_note" class="ql-editor"></div>
<!--            <h3>推广说明</h3>-->
<!--            <p style="margin-top: 0.8rem">-->
<!--              1.分享你的推广码给一起玩CSGO的朋友。-->
<!--              <br />2.分享你的推广码到CSGO的抖音，B站，快手，CSGO讨论群等。-->
<!--              <br />3.点击上方获取推广金按钮，获得你推广得到的分红。-->
<!--              <br />-->
<!--            </p>-->
          </div>
        </div>

        <div class="infos my-10">
          <v-row class="py-10">
            <v-col class="my-5" cols="12" md="6">
              <div class="text-center" style="font-size: 1.2rem">推广等级</div>

              <div class="mt-10 text-center mx-md-10">
                <v-row class="mb-5">
                  <v-col cols="4"> 等级 </v-col>
                  <v-col cols="4"> 推广次数 </v-col>
                  <v-col cols="4"> 奖励 </v-col>
                </v-row>
                <div>
                  <v-row v-for="item in levelSetting.list">
                    <v-col class="py-10 bg-grey-darken-5" cols="4">
                      {{ item.level }}
                    </v-col>

                    <v-col class="py-10 bg-grey-darken-5" cols="4">
                      {{ item.num }}
                    </v-col>

                    <v-col class="py-10 bg-grey-darken-5" cols="4">
                      {{ item.rebate_rate }}%
                    </v-col>
                  </v-row>
                </div>
              </div>
              <v-row class="mt-3">
                <v-col cols="12">
                  <div class="text-center" style="font-size: 1.2rem">
                    你的邀请人
                  </div>
                  <div
                    class="invite-info d-flex align-center justify-center mt-2"
                    v-if="inventInfo"
                  >
                    <img
                      :src="processImageUrl(inventInfo?.avatar)"
                      style="width: 26px; border-radius: 50%"
                    />
                    <span class="ml-1">{{ inventInfo.nickname }}</span>
                  </div>
                </v-col>
              </v-row>
            </v-col>

<!--            <v-col class="my-5" cols="12" md="6">-->
<!--              <div>-->
<!--                <div class="box">-->
<!--                  <div style="font-size: 1.2rem;margin-bottom: 10px">推广记录</div>-->
<!--                  <div class="box-sort">-->
<!--                    <el-date-picker-->
<!--                      style="width: 65%; margin: 0 10px"-->
<!--                      v-model="value"-->
<!--                      prefix-icon="el-icon-date"-->
<!--                      type="daterange"-->
<!--                      size="mini"-->
<!--                      :shortcuts="shortcuts"-->
<!--                      range-separator="至"-->
<!--                      start-placeholder="开始日期"-->
<!--                      end-placeholder="结束日期"-->
<!--                    ></el-date-picker>-->
<!--&lt;!&ndash;                    <i class="el-icon-sort" style="color: rgb(64, 158, 255)"&ndash;&gt;-->
<!--&lt;!&ndash;                      >奖励降序</i&ndash;&gt;-->
<!--&lt;!&ndash;                    >&ndash;&gt;-->
<!--                    <el-button size="medium" style="margin-left: 20px" @click="toTime" type="primary">确定</el-button>-->
<!--                    <el-button size="medium" style="margin-left: 20px" @click="reBack">重置</el-button>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="mt-10 text-center mx-md-10">-->
<!--                  <v-row class="mb-5">-->
<!--                    <v-col cols="4"> 用户名 </v-col>-->
<!--                    <v-col cols="4"> 奖励总额 </v-col>-->
<!--                    <v-col cols="4"> 时间 </v-col>-->
<!--                  </v-row>-->
<!--                  <div>-->
<!--                    <v-row v-for="item in record.list">-->
<!--                      <v-col class="py-10 bg-grey-darken-5" cols="4">-->
<!--                        {{ item.nickname }}-->
<!--                      </v-col>-->

<!--                      <v-col class="py-10 bg-grey-darken-5" cols="4">-->
<!--                        {{ item.rebate_total }}-->
<!--                      </v-col>-->

<!--                      <v-col class="py-10 bg-grey-darken-5" cols="4">-->
<!--                        {{ $dayjs.unix(item.created_at).format("YYYY-MM-DD") }}-->
<!--                      </v-col>-->
<!--                    </v-row>-->
<!--                  </div>-->
<!--                  <div style="margin-top: 20px">-->
<!--                    <el-pagination-->
<!--                            v-model:page-size="params.page_size"-->
<!--                            :total="record.total"-->
<!--                            v-model:current-page="params.page"-->
<!--                            @current-change="fetch"-->
<!--                            hide-on-single-page-->
<!--                    ></el-pagination>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </v-col>-->
          </v-row>
        </div>
      </v-container>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs ,toRaw} from "vue";
import { PromoteService } from "@/services/PromoteService";
import { useStore } from "@/store";
import { processImageUrl } from "@/utils"
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
const shortcuts = [
  {
    text: "最近一周",
    value: (() => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    })(),
  },
  {
    text: "最近一个月",
    value: (() => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    })(),
  },
  {
    text: "最近三个月",
    value: (() => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    })(),
  },
];

export default defineComponent({
  name: "Promote",

  setup() {
    const store = useStore();
    const state = reactive({
      shortcuts,
      value: "",
      stat: computed(() => store.getters.promoteStat),
      record: computed(() => store.getters.promoteRecord),
      levelSetting: computed(() => store.getters.levelSetting),
      inventInfo: computed(() => store.getters.inviterInfo),
      inviteCode: computed(() => store.state.user?.invite_code),
      contentList:[],
      promotion_note:'',
      params:{
        page:1,
        page_size: 10,
        start_time:'',
        end_time:''
      }
    });
    onMounted(() => {
      if (store.state.user) {
        stat();
        // record();
        levelSetting();
        inventInfo();
      }
      getContentList()
    });

    const stat = async () => {
      store.dispatch('getPromoteStat');
    };

    const inventInfo = () => {
      return store.dispatch("getInviterInfo");
    };

    const record = async () => {
      // store.dispatch("getPromoteRecord",state.params);
    };

    const receiveRebate = async () => {
      await PromoteService.receiveRebate();
    };

    const getContentList = async () => {
      let res = await PromoteService.getContent({
        key:'popularize'
      });
      if(res.data.code == 0){
        state.contentList = res.data.data
      }

      let result = await PromoteService.getContent({
        key:'promotion_note'
      });
      if(result.data.code == 0){
         if(result.data.data.length > 0){
           state.promotion_note = result.data.data[0].value
         }
      }
    };
    const levelSetting = async () => {
      store.dispatch("getLevelSetting");
    };
    function fetch(e) {
       state.params.page = e
       record()
    }
    function getTimeStamp(dateStr) {
      let timestamp = Date.parse(dateStr);
      return timestamp / 1000;
    }
    function toTime() {
      let arr = toRaw(state.value)
      state.params.start_time = getTimeStamp(arr[0])
      state.params.end_time = getTimeStamp(arr[1])
      record()
    }
    function reBack() {
      state.params.start_time = ''
      state.params.end_time = ''
      state.value = []
      record()
    }
    return {
      ...toRefs(state),
      processImageUrl,
      receiveRebate,
      fetch,
      toTime,
      reBack
    };
  },
});
</script>

<style lang="scss" scoped>
.bg-grey-darken-5 {
  background-color: #212128;
}

.promote-activity {
  .box-type {
    width: 100%;
    display: flex;

    .box-item {
      position: relative;

      height: 17rem;

      .box-img {
        position: absolute;
        z-index: 2;
        margin: 1rem auto 0 auto;
        display: block;
      }

      .box-bg {
        position: absolute;
        top: -2rem;
        z-index: 1;
      }

      img {
        width: 15rem;
      }

      p {
        font-size: 1.3rem;
        margin: 12rem 0 0 0;
        font-weight: 700;
        text-align: center;
        color: #fff;
      }
    }
  }

  .all-keys {
    color: #fff;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin: 4rem 0 2rem 0;

    i {
      padding: 0 5px;
      font-weight: bold;
      font-style: normal;
      color: rgb(255, 157, 0);
    }
  }

  .group-keys {
    margin-top: 0;

    font-size: 1.17em;
  }
}

.get-keys {
  .wrapper {
    background-size: cover;
    background-image: url("@/static/img/layout/bg_keys.png");

    .keys {
      .item {
        > img {
          width: 4rem;
        }

        p {
          margin: 0;
          font-weight: 800;
          color: #9b9aa1;
          display: flex;
          align-items: center;
        }

        h4 {
          color: #ff9d00;
        }

        > span {
          display: inline-block;
          height: 2px;
          width: 45%;
          border-top: 2px dashed #5a5a63;
          margin: 0 1rem;
        }
      }
    }
  }
}

.prompte-info {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  background-color: #1a1a1e;
  margin: 1rem auto 0 auto;
  justify-content: center;
  padding: 4rem 2rem 0 2rem;
  box-sizing: border-box;

  .item {
    width: 48%;
    padding: 0 2rem;
    height: 15rem;

    h3 {
      color: #d0d2e0;
      margin-bottom: 0.4rem;
    }

    p {
      margin: 0;
      color: #9b9aa1;
    }
  }
}

.prompte-title {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin: 45px auto 48px auto;
}

.prompte-box {
  width: 100%;
  background-color: #1a1a1e;
  padding-top: 40px;

  .input {
    > div {
      font-size: 1.1rem;
      height: 100%;
      color: #fff;
    }

    .btn {
      width: 27%;
      height: 2.9rem;
      background-color: #7668cb;
      color: #fff;
      text-align: center;
      line-height: 2.9rem;
      border-radius: 5px;
      margin-left: 1rem;
      cursor: pointer;
    }
  }

  .main {
    min-height: 20rem;
    background-image: url("@/static/img/layout/bg_promote_main.png");
    background-repeat: no-repeat;
    background-position-y: -4.7rem;
    overflow: hidden;
    background-size: cover;
    color: #fff;

    .top {
      width: 92%;
      height: 44%;
      display: flex;
      margin: 0 auto;

      p {
        width: 17%;
        height: 100%;
        margin: 0;
        line-height: 10rem;
        text-align: center;
      }
    }

    .bottom {
      box-sizing: border-box;
      width: 92%;
      height: 44%;
      display: flex;
      margin: 0 auto;

      p {
        width: 17%;
        background-color: #212128;
        margin: 0 1px;
        height: 70%;
        line-height: 6.5rem;
        text-align: center;
      }
    }
  }

  .get-rebates {
    width: 100%;
    height: 6rem;

    .btn {
      cursor: pointer;
      width: 11rem;
      height: 3rem;
      margin: 3rem auto;
      background-color: #7668cb;
      text-align: center;
      line-height: 3rem;
      border-radius: 4px;
      font-size: 1.1rem;
      color: #fff;
    }
  }

  .prompte-desc {
    min-height: 20rem;
    background-image: url("@/static/img/layout/bg_promote_main.png");
    background-repeat: no-repeat;
    background-position-y: -4.7rem;
    overflow: hidden;
    background-size: cover;
    color: #fff;
  }

  .infos {
    background-color: #161619;
    color: #fff;

    .grade,
    .recording {
      .box {
        width: 90%;
        margin: 1rem auto 1.8rem auto;
        display: flex;
        justify-content: center;
        align-items: center;

        .box-sort {
          width: 70%;

          .el-icon-sort {
            margin-left: 5px;
            cursor: pointer;
          }
        }

        span {
          margin: 0px 3rem 0px 0px;
          font-size: 1.2rem;
          position: relative;
        }
      }

      .top {
        width: 92%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        text-align: center;
      }

      .bottom {
        margin-bottom: 0.5rem;
        width: 92%;
        display: flex;
        margin: 0 auto;

        p {
          background-color: #212128;
          line-height: 4rem;
          width: 34%;
          height: 4rem;
          margin: 0;
          text-align: center;
        }
      }
    }

    .grade {
      .title {
        width: 90%;
        margin: 1rem auto 1.8rem auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          margin: 0px 3rem 0px 0px;
          font-size: 1.2rem;
          position: relative;
          top: -0.3rem;
        }
      }

      .top {
        width: 92%;
        display: flex;
        margin: 0 auto;

        p {
          width: 34%;
          height: 4rem;
          margin: 0;
          text-align: center;
        }
      }

      .bottom {
        margin-bottom: 0.5rem;
        width: 92%;
        display: flex;
        margin: 0 auto;

        p {
          background-color: #212128;
          line-height: 4rem;
          width: 34%;
          height: 4rem;
          margin: 0;
          text-align: center;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.box-sort {
  .el-range-editor--mini .el-range-separator {
    width: 10% !important;
  }
}
</style>
